import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import router from '@/router'

// console.log(process.env.NODE_ENV, 'env')
// console.log(process.env.VUE_APP_BASE_API, 'baseapi')

const request = axios.create({
  // baseURL: 'https://heimahr.itheima.net/api/',
  // baseURL 如果没有【协议、域名、端口】前缀，那么就表示没有指定【服务器地址】，那么会默认以【网站的根路径】作为服务器地址
  // baseURL: '/api/', // 这种方式写死了，无法根据环境来动态变化
  baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量的这种形式，可以根据当前运行环境动态取值
  timeout: 5000
})

// 请求拦截器：token 注入
request.interceptors.request.use((config) => {
  if (store.getters.token) {
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
})

// 响应拦截器：简化响应数据，错误消息提示

// 先根据业务处理是否成功，做一个逻辑分支处理，不做其他处理
// 如果业务处理成功：让后续成功
// 如果业务处理失败：让后续失败
request.interceptors.response.use(res => {
  console.log(res, 'res')
  const { success } = res.data
  if (success) return res // 这里 return 的值会作为 value 传递给下一个拦截器的成功处理函数
  // 让后面的拦截器进入错误的回调，res 会作为 reason 传递给下一个拦截器的错误处理函数
  return Promise.reject(res)
})

// 提取业务数据，只要进入到这个成功的拦截器，业务一定是成功的，因为前面已经做了逻辑分支处理
request.interceptors.response.use(res => res.data.data)

// 401的拦截器，token过期处理
request.interceptors.response.use(undefined, async err => {
  if (err?.response?.status === 401) {
    Message.warning('token已超时，请重新登录！')
    await store.dispatch('user/logout')
    router.push({ name: 'LoginPage' })
    // 一旦 token 过期 跳到 登录页后，后面的逻辑就不需要执行了，所以返回一个状态永远为 pending 的 Promise 实例，去中断链式调用
    return new Promise(() => {})
  }
  return Promise.reject(err)
})

// 处理错误消息提示
request.interceptors.response.use(undefined, err => {
  // err、err.data、err.data.message 都有可能是 undefined
  if (err && err.data && err.data.message) {
    Message.error(err.data.message)
  }
  return Promise.reject(err)
})

export default request
